<script setup>
import { RouterView, RouterLink } from 'vue-router'
import { ref } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
import router from '@/router';
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const loading=ref(false);
axios('http://175.178.62.164:61803/manager/check').then(res=>{     //检测是否登录成功
    if(res.data.code==1200){
      route.push('/error');
      // console.log(proxy.$forceUpdate);
      // proxy.$forceUpdate=function(){};        //强制停止渲染!
      // console.log(proxy.$forceUpdate);
      ElMessageBox.alert('您还未登录!', '警告!', {
      confirmButtonText: 'OK',
    }).then(()=>{
      route.push('/login');
    })
    }
    loading.value=true;
}).catch(err=>{
  console.log(err);
})
const quit=()=>{                //  退出登录，清空会话
  axios('http://175.178.62.164:61803/manager/logout').then(res=>{
    route.push('/login');
  }).catch(err=>{
    console.log(err);
  })
}
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

const table = ref(false)

let header = ref('用户列表');

const route=new useRouter();
if(route.currentRoute.value.fullPath=='/layout/users'){
  header.value = '用户列表';
}
else if(route.currentRoute.value.fullPath=='/layout/message'){
  header.value = '消息推送';
}
else if(route.currentRoute.value.fullPath=='/layout/config'){
  header.value = '用户端配置';
}

const managerName = ref('')

//将管理员名字渲染到顶部
axios({
  url: 'http://175.178.62.164:61803/manager/check'
}).then(result => {
  managerName.value = result.data.data.managerName
}).catch(err => {
  console.dir(err);
});

//获取用户反馈消息列表
const circleOpacity = ref()
const messageList = ref()
axios({
  url: 'http://175.178.62.164:61803/feedback/list'
}).then(result => {
  // console.log(result.data.data);
  // console.log(result.data.data[0].message);

  //result.data.data.state的0是未读，1是已读
  messageList.value = result.data.data
  const flag = ref(0)
  result.data.data.forEach((item, index) => {
    if (item.state) {
      messageList.value[index].color = 'rgb(11, 189, 135)'
    } else {
      flag.value = 1 //如果有一条未读，就显示小圆点
      messageList.value[index].color = 'rgb(239, 13, 48)'
    }
  });
  if (flag.value) {
    circleOpacity.value = 1
  } else {
    circleOpacity.value = 0
  }
}).catch(err => {
  console.dir(err);
});

//反馈详情弹框
const feedbackId = ref()
const openId = ref('')

const dialogVisible = ref(false)
const messageManager = ref('')
const managerCotent = ref('')
const managerDate = ref('')
const messageUser = ref('')
const userCotent = ref('')
const userDate = ref('')
const messageTitle = ref('')
const messageDetails = id => {
  dialogVisible.value = true
  feedbackId.value = id
  // 渲染反馈详情
  axios({
    url: 'http://175.178.62.164:61803/feedback/list'
  }).then(result => {
    //筛选出管理员点击的消息，再将其渲染到弹框里
    const list = result.data.data.filter(item => {
      return item.id == id
    })
    // console.log(list);
    messageManager.value = list[0].message.managerName
    managerCotent.value = list[0].message.content
    managerDate.value = list[0].message.createTime

    messageUser.value = list[0].message.name
    userCotent.value = list[0].content
    userDate.value = list[0].createTime
    messageTitle.value = list[0].message.title
    openId.value = list[0].openid

  }).catch(err => {
    console.dir(err);
  });
}

//标记为已读
const read = () => {
  dialogVisible.value = false
  axios({
    url: `http://175.178.62.164:61803/feedback/read`,
    params: {
      id: Number(feedbackId.value)
    }
  }).then(result => {
    // console.log(result.data.data);
    // console.log(result.data.data[0].message);
    //result.data.data.state的0是未读，1是已读
    messageList.value.forEach(item => {
      if (item.id === feedbackId.value) {
        item.color = 'rgb(11, 189, 135)'
      }
    });
    const flag = ref(0)
    axios({
      url: 'http://175.178.62.164:61803/feedback/list'
    }).then(result => {
      // console.log(result.data.data);
      // console.log(result.data.data[0].message);

      //result.data.data.state的0是未读，1是已读
      const flag = ref(0)
      result.data.data.forEach(item => {
        if (!item.state) {
          flag.value = 1 //如果有一条未读，就显示小圆点
        }
      });
      if (flag.value) {
        circleOpacity.value = 1
      } else {
        circleOpacity.value = 0
      }
    }).catch(err => {
      console.dir(err);
    });
    if (flag.value) {
      circleOpacity.value = 1
    } else {
      circleOpacity.value = 0
    }
  })
}

//回复用户
const dialogVisible1 = ref(false)
const replyTitle = ref('')
const replyContent = ref('')
const successOpacity = ref(0)
const errorOpacity = ref(0)
//显示回复弹框
const reply = () => {
  dialogVisible1.value = true
}
//发送回复
const submitReply = () => {
  //发送
  axios({
    url: 'http://175.178.62.164:61803/message/send',
    method: 'post',
    params: {
      openid: openId.value,
      title: replyTitle.value,
      content: replyContent.value,
      normal: 1
    }
  }).then(result => {
    dialogVisible1.value = false
    //发送成功的提示和发送失败的提示
    if (result.data.code === 0) {
      successOpacity.value = 1
      setTimeout(() => {
        successOpacity.value = 0
      }, 3000)
      replyTitle.value = ''
      replyContent.value = ''
    } else {
      errorOpacity.value = 1
      setTimeout(() => {
        errorOpacity.value = 0
      }, 3000)
    }
  })
}

//用户消息反馈右侧弹出栏
const Usermessage = () => {
  table.value = true
  axios({
    url: 'http://175.178.62.164:61803/feedback/list'
  }).then(result => {
    // console.log(result.data.data);
    // console.log(result.data.data[0].message);

    //result.data.data.state的0是未读，1是已读
    messageList.value = result.data.data
    const flag = ref(0)
    result.data.data.forEach((item, index) => {
      if (item.state) {
        messageList.value[index].color = 'rgb(11, 189, 135)'
      } else {
        flag.value = 1 //如果有一条未读，就显示小圆点
        messageList.value[index].color = 'rgb(239, 13, 48)'
      }
    });
    if (flag.value) {
      circleOpacity.value = 1
    } else {
      circleOpacity.value = 0
    }
  }).catch(err => {
    console.dir(err);
  });
}

const usersUrl = () => {
  header.value = '用户列表' //script中访问响应式数据需要加.value，template中不需要
}
const messageUrl = () => {
  header.value = '消息推送'
}
const configUrl = () => {
  header.value = '用户端配置'
}

</script>

<template>
  <el-container class="bigContainer">

    <el-alert title="发送成功！" type="success" class="el-alert" :style="{ opacity: successOpacity }" />
    <el-alert title="发送失败！" type="error" class="el-alert" :style="{ opacity: errorOpacity }" />

    <!-- 右侧弹出栏 -->
    <el-drawer v-model="table" title="用户消息反馈" direction="rtl" size=500>
      <el-timeline>
        <el-timeline-item v-for="(item) in messageList" :key="item.id" :timestamp=item.createTime placement="top"
          :color="item.color">
          <el-card class="el-card">
            <el-popover placement="top-start" :width="200" trigger="hover" content="点击查看消息详情">
              <template #reference>
                <div @click="messageDetails(item.id)">
                  <h4>{{ item.message.name }}</h4>
                  <br>
                  <p>{{ item.content }}</p>
                </div>
              </template>
            </el-popover>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-drawer>

    <!-- 用户消息反馈详情弹框 -->
    <el-dialog v-model="dialogVisible" :title=messageTitle width="50%">
      <h3 class="messageFont">{{ messageManager }}：</h3>
      <span class="messageFont">{{ managerCotent }}</span>
      <div class="messageSmallFont">{{ managerDate }}</div>
      <h3 class="messageFont">{{ messageUser }}：</h3>
      <span class="messageFont">{{ userCotent }}</span>
      <div class="messageSmallFont">{{ userDate }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="read" class="messageButton">标记为已读</el-button>
          <el-button type="primary" @click="reply" class="messageButton">
            回复
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 回复用户消息 -->
    <el-dialog v-model="dialogVisible1" title="请在此填写回复内容" width="50%">

      <el-form-item label="标题">
        <el-input v-model="replyTitle" />
      </el-form-item>
      <br>
      <el-form-item label="内容">
        <el-input v-model="replyContent" :autosize="{ minRows: 5, maxRows: 5 }" resize="none" type="textarea" />
      </el-form-item>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" class="messageButton" @click="submitReply">
            发送
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-aside width="13vw">
      <h2 class="mb-1">AchoBeta</h2>
      <h2 class="mb-2">招新管理系统</h2>
      <div class="wrap">
        <RouterLink to="/layout/users" @click="usersUrl">用户列表</RouterLink>
        <RouterLink to="/layout/message" @click="messageUrl">消息推送</RouterLink>
        <RouterLink to="/layout/config" @click="configUrl">用户端配置</RouterLink>
      </div>

    </el-aside>
    <el-container class="smallContainer">
      <el-header>
        <span class="header">{{ header }}</span>
        <div :style="{ opacity: circleOpacity }" class="circle"></div>
        <img src="../assets/lingDang.png" alt="" class="lingdang" @click="Usermessage">
        <span class="name">{{ managerName }}</span>
        <el-button type="primary" @click="quit" class="back">退出</el-button>
      </el-header>
      <el-main>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
p span{
  word-wrap: break-word;
}
* {
  margin: 0;
  padding: 0;
}

.el-alert {
  margin: 20px 0 0;
  position: fixed;
  z-index: 99999;
  left: 50vw;
  top: 50px;
  width: 300px;
  height: 40px;
  transform: translate(-50%, -50%);
}

.el-alert:first-child {
  margin: 0;
}

.messageSmallFont {
  font-size: 12px;
  padding: 15px;
}

.messageFont {
  padding: 15px;
  word-wrap: break-word;
}

.messageButton {
  padding: 5px 10px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.el-card:hover {
  box-shadow: 2px 2px 15px #8b8b8b;
  cursor: pointer;
}

.wrap {
  display: flex;
  width: 100%;
  flex-direction: column;
  text-align: center;
  background-color: #4993fa;
}

.wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  color: #fff;
}

.wrap a:hover {
  background-color: #3678d5;
  color: rgb(252, 204, 128);
}

.wrap a.router-link-active {
  background-color: #3678d5;
  color: rgb(252, 204, 128);
}

.mb-1 {
  color: #fff;
  font-size: 1.6vw;
  padding: 1vw 1vw 0 1vw;
}

.mb-2 {
  color: #fff;
  font-size: 1.6vw;
  padding: 0 1vw 1vw 1vw;
}

.bigContainer {
  width: 100vw;
  height: 100vh;
  background-color: rgb(231, 231, 231);
}

.el-aside {
  background-color: #4993fa;
}

.el-header {
  padding: 0 3vw;
  margin: 0 0 1vw 0;
  background-color: #fff;
  box-shadow: 10px 3px 10px rgb(71, 71, 71);
  height: 3.5vw;
  line-height: 3.5vw;
}

.header {
  font-size: 1.5vw;
  font-weight: 700;
}

.name {
  position: absolute;
  left: 86vw;
  font-size: 1.2vw;
}

.lingdang {
  position: absolute;
  left: 84vw;
  top: 1.75vw;
  width: 30px;
  height: 30px;
  font-size: 1.5vw;
  font-weight: 700;
  transform: translate(-50%, -50%);
  color: black;
  cursor: pointer;
}

.circle {
  position: absolute;
  left: 84vw;
  top: 1.75vw;
  transform: translate(-50%, -50%);
  transform: translate(8px, -12px);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: red;
}

.circleHidden {
  display: none;
}

.back {
  position: absolute;
  padding: 0 13px;
  left: 94vw;
  top: 1.75vw;
  transform: translate(-50%, -50%);
  margin: 0 10px;
}

.message {
  position: absolute;
  padding: 0 13px;
  left: 90vw;
  top: 1.75vw;
  transform: translate(-50%, -50%);
  margin: 0 10px;
}
</style>